<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>求职干货 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/discover.css">
    <link rel="stylesheet" href="../css/article-list.css">
    <style>
        /* 求职干货列表页面特有样式 */
        .filter-section {
            padding: 12px 16px;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .filter-tabs {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            -ms-overflow-style: none;
            gap: 15px;
            padding-bottom: 5px;
        }
        
        .filter-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tabs .tab {
            padding: 6px 16px;
            border-radius: 16px;
            background-color: #f5f5f5;
            font-size: 14px;
            color: #666;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .filter-tabs .tab.active {
            background-color: #4e6ef2;
            color: #fff;
            font-weight: 500;
        }
        
        .tips-list {
            padding: 12px 16px;
        }
        
        .tips-item {
            margin-bottom: 20px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .tips-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }
        
        .tips-img {
            height: 160px;
            position: relative;
            overflow: hidden;
        }
        
        .tips-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .tips-item:hover .tips-img img {
            transform: scale(1.05);
        }
        
        .tips-category {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 4px 10px;
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .tips-content {
            padding: 16px;
            background-color: #fff;
        }
        
        .tips-content h3 {
            font-size: 16px;
            margin: 0 0 8px;
            color: #333;
            font-weight: 600;
            line-height: 1.4;
        }
        
        .tips-content p {
            font-size: 14px;
            color: #666;
            margin: 0 0 15px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .tips-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .author {
            display: flex;
            align-items: center;
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 6px;
            object-fit: cover;
        }
        
        .author span {
            font-size: 13px;
            color: #666;
        }
        
        .likes {
            font-size: 13px;
            color: #ff5c5c;
        }
        
        .load-more-container {
            display: flex;
            justify-content: center;
            padding: 10px 0 30px;
        }
        
        .load-more-btn {
            padding: 10px 24px;
            background-color: #f5f7fa;
            border: none;
            border-radius: 20px;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .load-more-btn:hover {
            background-color: #e8edf5;
            color: #4e6ef2;
        }
        
        .load-more-btn i {
            font-size: 12px;
        }
        
        .spin {
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="header">
            <a href="discover.html" class="back-btn"><i class="bi bi-arrow-left"></i></a>
            <h1 class="page-title">求职干货</h1>
            <div class="user-info">
                <i class="bi bi-search"></i>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 筛选标签 -->
            <section class="filter-section">
                <div class="filter-tabs">
                    <div class="tab active">全部</div>
                    <div class="tab">简历优化</div>
                    <div class="tab">面试技巧</div>
                    <div class="tab">求职礼仪</div>
                    <div class="tab">薪资谈判</div>
                    <div class="tab">职业规划</div>
                    <div class="tab">行业洞察</div>
                </div>
            </section>

            <!-- 干货列表 -->
            <section class="content-list tips-list">
                <!-- 简历优化 -->
                <div class="tips-item" data-id="1" data-category="简历优化">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/4342496/pexels-photo-4342496.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="简历技巧">
                        <span class="tips-category">简历优化</span>
                    </div>
                    <div class="tips-content">
                        <h3>如何在简历中突出项目经历</h3>
                        <p>项目经历是HR最关注的部分，如何把经历写得既真实又吸引人？本文提供了实用的项目描述STAR法则和量化技巧。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/819530/pexels-photo-819530.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>简历优化师Tom</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 328</span>
                        </div>
                    </div>
                </div>

                <!-- 面试技巧 -->
                <div class="tips-item" data-id="2" data-category="面试技巧">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/5668858/pexels-photo-5668858.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="面试技巧">
                        <span class="tips-category">面试技巧</span>
                    </div>
                    <div class="tips-content">
                        <h3>大厂面试常见问题及应对策略</h3>
                        <p>整理了BAT等大厂的高频面试问题，以及回答技巧与注意事项，帮助你从容应对各类难题，赢得面试官青睐。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>资深面试官李明</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 456</span>
                        </div>
                    </div>
                </div>

                <!-- 求职礼仪 -->
                <div class="tips-item" data-id="3" data-category="求职礼仪">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="求职礼仪">
                        <span class="tips-category">求职礼仪</span>
                    </div>
                    <div class="tips-content">
                        <h3>职场礼仪须知</h3>
                        <p>面试与入职过程中的礼仪细节，让你赢在起跑线。从着装、握手到邮件沟通，细节决定成败的职场礼仪全攻略。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>职场礼仪专家王丽</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 287</span>
                        </div>
                    </div>
                </div>

                <!-- 薪资谈判 -->
                <div class="tips-item" data-id="4" data-category="薪资谈判">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/3943716/pexels-photo-3943716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="薪资谈判">
                        <span class="tips-category">薪资谈判</span>
                    </div>
                    <div class="tips-content">
                        <h3>薪资谈判技巧</h3>
                        <p>掌握薪资谈判的技巧，争取最优的offer待遇。了解行业薪资水平，找准谈判时机，用数据说话，不卑不亢表达价值。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>HR总监赵旭</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 345</span>
                        </div>
                    </div>
                </div>

                <!-- 简历优化 -->
                <div class="tips-item" data-id="5" data-category="简历优化">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/7256694/pexels-photo-7256694.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="简历技巧">
                        <span class="tips-category">简历优化</span>
                    </div>
                    <div class="tips-content">
                        <h3>应届生简历写作攻略</h3>
                        <p>没有实习经验的应届生如何打造一份吸引HR的简历？本文教你挖掘校园经历亮点，突出可迁移能力，从零开始制作专业简历。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/762020/pexels-photo-762020.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>校招负责人张洁</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 421</span>
                        </div>
                    </div>
                </div>

                <!-- 面试技巧 -->
                <div class="tips-item" data-id="6" data-category="面试技巧">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/4164347/pexels-photo-4164347.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="面试技巧">
                        <span class="tips-category">面试技巧</span>
                    </div>
                    <div class="tips-content">
                        <h3>技术面试如何展示你的技术深度</h3>
                        <p>在技术面试中既不卖弄也不怯场，如何准确展示你的技术实力？掌握问题分析方法，展示思考过程，不止于解决问题。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>技术总监陈志</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 389</span>
                        </div>
                    </div>
                </div>
                
                <!-- 职业规划 -->
                <div class="tips-item" data-id="7" data-category="职业规划">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/5989926/pexels-photo-5989926.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="职业规划">
                        <span class="tips-category">职业规划</span>
                    </div>
                    <div class="tips-content">
                        <h3>职场新人如何做好3-5年职业规划</h3>
                        <p>刚入职场的新人该如何规划自己的职业道路？如何设定阶段性目标并持续成长？避开职场发展误区，规划合理职业路径。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/1516680/pexels-photo-1516680.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>职业规划师吴青</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 356</span>
                        </div>
                    </div>
                </div>
                
                <!-- 行业洞察 -->
                <div class="tips-item" data-id="8" data-category="行业洞察">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="行业洞察">
                        <span class="tips-category">行业洞察</span>
                    </div>
                    <div class="tips-content">
                        <h3>2023年十大热门行业就业前景分析</h3>
                        <p>AI、芯片、新能源等热门行业的人才需求及薪资趋势深度解析，帮助你找准行业定位，把握就业机会。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>行业分析师马元</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 467</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 加载更多 -->
            <div class="load-more-container">
                <button class="load-more-btn">加载更多 <i class="bi bi-chevron-down"></i></button>
            </div>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <a href="../index.html" class="tab-item">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </a>
            <a href="discover.html" class="tab-item active">
                <i class="bi bi-compass-fill"></i>
                <span>发现</span>
            </a>
            <a href="agents.html" class="tab-item">
                <i class="bi bi-person-badge"></i>
                <span>经纪人</span>
            </a>
            <a href="profile.html" class="tab-item">
                <i class="bi bi-person"></i>
                <span>我的</span>
            </a>
        </footer>
    </div>

    <script src="../js/main.js"></script>
    <script src="../js/article-list.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 添加点击特效
            document.querySelectorAll('.tips-item').forEach(item => {
                item.addEventListener('mousedown', function() {
                    this.style.transform = 'scale(0.98)';
                });
                
                item.addEventListener('mouseup', function() {
                    this.style.transform = '';
                });
                
                item.addEventListener('mouseleave', function() {
                    this.style.transform = '';
                });
            });
            
            // 筛选标签点击事件
            const filterTabs = document.querySelectorAll('.filter-tabs .tab');
            const tipsItems = document.querySelectorAll('.tips-item');
            
            filterTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有激活状态
                    filterTabs.forEach(t => t.classList.remove('active'));
                    // 当前标签添加激活状态
                    this.classList.add('active');
                    
                    const category = this.textContent;
                    
                    // 筛选文章
                    tipsItems.forEach(item => {
                        if (category === '全部' || item.dataset.category === category) {
                            item.style.display = 'block';
                            // 添加进入动画
                            item.style.opacity = '0';
                            item.style.transform = 'translateY(20px)';
                            setTimeout(() => {
                                item.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                                item.style.opacity = '1';
                                item.style.transform = 'translateY(0)';
                            }, 50);
                        } else {
                            item.style.display = 'none';
                        }
                    });
                    
                    // 显示过滤结果的提示
                    const visibleItems = document.querySelectorAll('.tips-item[style="display: block"]').length;
                    if (category !== '全部') {
                        showToast(`找到${visibleItems}篇"${category}"相关干货`);
                    }
                });
            });
            
            // 点击跳转到详情页
            tipsItems.forEach(item => {
                item.addEventListener('click', function() {
                    const id = this.dataset.id;
                    window.location.href = `tips-details.html?id=${id}`;
                });
            });
            
            // 加载更多按钮点击事件
            const loadMoreBtn = document.querySelector('.load-more-btn');
            if(loadMoreBtn) {
                loadMoreBtn.addEventListener('click', function() {
                    this.innerHTML = '<i class="bi bi-arrow-repeat spin"></i> 加载中...';
                    this.disabled = true;
                    
                    // 模拟加载延迟
                    setTimeout(() => {
                        this.innerHTML = '没有更多内容了';
                        this.disabled = true;
                    }, 1500);
                });
            }
            
            // Toast消息
            function showToast(message) {
                // 如果已有Toast，则先移除
                const existingToast = document.querySelector('.toast-message');
                if (existingToast) {
                    existingToast.remove();
                }
                
                // 创建Toast元素
                const toast = document.createElement('div');
                toast.className = 'toast-message';
                toast.textContent = message;
                document.body.appendChild(toast);
                
                // 显示Toast
                setTimeout(() => {
                    toast.classList.add('show');
                }, 10);
                
                // 自动消失
                setTimeout(() => {
                    toast.classList.remove('show');
                    setTimeout(() => {
                        toast.remove();
                    }, 300);
                }, 2500);
            }
            
            // 添加Toast样式
            if (!document.querySelector('#toast-style')) {
                const style = document.createElement('style');
                style.id = 'toast-style';
                style.textContent = `
                    .toast-message {
                        position: fixed;
                        bottom: 80px;
                        left: 50%;
                        transform: translateX(-50%) translateY(20px);
                        background-color: rgba(0, 0, 0, 0.7);
                        color: white;
                        padding: 10px 20px;
                        border-radius: 20px;
                        font-size: 14px;
                        opacity: 0;
                        transition: all 0.3s ease;
                        z-index: 1000;
                    }
                    
                    .toast-message.show {
                        opacity: 1;
                        transform: translateX(-50%) translateY(0);
                    }
                `;
                document.head.appendChild(style);
            }
        });
    </script>
</body>
</html> 